<template>
	<view class="operate-guide">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode=""></image>
			</view>
			<!-- 页面标题 -->
			<view class="nav-title">操作指南</view>
		</view>
		<div class="guideIist">
			<div class="guideItem" v-for="(item, index) in guideList" :key="index" @click="toGuideDetail(item)">
				<p>{{ item.title }}</p>
				<image src="/static/mine/jiantou.png" mode=""></image>
			</div>
		</div>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import { getArticleList } from '@/api/mine.js'
	export default {
		data() {
			return {
				status: 'nomore',
				guideList: [],
				pageData: {
					page: 1,
					total: 0
				}
			}
		},
		onLoad() {
			this.getArticleList();
		},
		methods: {
			async getArticleList() {
				const res = await getArticleList({ page: this.pageData.page });
				// console.log(res, 'reeeee');
				if (res.response.statusCode === 200) {
					this.guideList = res.data.data.data;
					this.pageData.total = res.data.data.total;
					// 更新状态
					this.status = this.guideList.length < this.pageData.total ? 'nomore' : 'loadmore';
					uni.hideToast();
				} else {
					this.guideList = [];
					this.status = 'loadmore'; // 请求失败恢复状态
				}
			},
			toGuideDetail (item) {
				uni.navigateTo({
					url:'/pages/mine/guideDetail?id=' + item.id + '&type=guide'
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.pageData.page = 1; // 重置为第一页
				this.guideList = []; // 清空当前列表数据
				this.getArticleList(); // 请求第一页数据
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
			//上拉加载
			onReachBottom() {
				console.log('Reached bottom. Status:', this.status);
				if (this.status === 'loading' || this.status === 'nomore') return;
				this.status = 'loading';
				this.pageData.page++; // 增加当前页码
				this.getArticleList();
			},
			goBack() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
	image{
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}
.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}
.guideIist{
	.guideItem{
		width: 82%;
		padding: 16px 20px;
		margin: 20px auto;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.01);
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		p{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 13px;
			color: #222222;
		}
		image{
			width: 16px;
			height: 16px;
		}
	}
}
</style>
